#define searchTab(name, tabs, values)
	<style>
		.searchtab-wrapper {
			display: inline-block;
			margin-right: 10px;
		}
		
		.searchtab-wrapper span {
			height: 34px;
		    padding: 7px 24px;
		    font-size: 14px;
		    color: #555;
		    background-color: #fff;
		    background-image: none;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    display: inline-block;
		    cursor: pointer;
		}
		
		.searchtab-wrapper span.active {
		    border-color: #66afe9;
		    color: #66afe9;
		}
	</style>
	
	<div class="searchtab-wrapper">
		<input type="hidden" class="#(name)-hook" key="#(name)" value="" />
		#for(tab:tabs)
			<span class="#(name)" val="#(values[for.index])">#(tab)</span>
		#end
	</div>
	
	<script>
		$(function(){
			$(".searchtab-wrapper span.#(name)").click(function(e){
				var that = $(this),
					val = that.attr("val"),
					input = that.siblings("input")
				
				if(that.hasClass("active")){
					that.removeClass("active")
					input.val("")
				}else{
					that.addClass("active").siblings().removeClass("active")
					input.val(val)
				}
			})
			
			$(".searchtab-wrapper span.#(name)").mousedown(function(e){
				e.preventDefault()
			})
		})
	</script>
#end